<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-11-17 11:40:09
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-07 11:21:54
 * @FilePath: \blog\src\views\admin\home\components\Menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-menu
    :default-active="$route.path"
    active-text-color="#409EFF"
    background-color="#011528"
    text-color="#fff"
    :collapse="$store.state.isCollapse"
    unique-opened
    router
  >
    <el-sub-menu index="/sys">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/admin/sys/user">
        用户管理
      </el-menu-item>
      <el-menu-item index="/admin/sys/role">
        角色管理
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/goods">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/admin/goods/list">
        商品列表
      </el-menu-item>
      <el-menu-item index="/admin/goods/classify">
        商品分类
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>

</script>

<style lang="scss">
    .el-sub-menu__title:hover{
      background-color: #409EFF!important;
    }
    .el-menu {
        border-right: 0px!important;
    }

    /* 选中的一级标题背景变色 */
    .is-active .el-sub-menu__title{
      background-color: #409EFF!important;
    }

    .el-menu:not(.el-menu--collapse) {
        width: 200px;
    }

    .el-menu-item{
      padding-left: 15px;
    }
</style>
